<template>
	<div>
        <el-button type="primary" text @click="add">
		增加
	    </el-button>
	    <!-- Form增加 -->
        <el-dialog v-model="dialogFormVisible" title="服务点检">
            <el-form :model="form">
                <el-form-item label="活动点检标题" :label-width="formLabelWidth">
                    <el-input v-model="form.Title" autocomplete="off" />
                </el-form-item>
                <el-form-item label="活动点检地址" :label-width="formLabelWidth">
                    <el-input v-model="form.Address" autocomplete="off" />
                </el-form-item>
                
                <el-form-item label="开始时间" :label-width="formLabelWidth">
                    <el-date-picker :disabledDate="disabledDateFun" v-model="form.StartDate" type="datetime" placeholder="选择日期" />
                    
                </el-form-item>
                <el-form-item label="结束时间" :label-width="formLabelWidth">
                    <el-date-picker :disabledDate="disabledDateFun" v-model="form.EndDate" type="datetime" placeholder="选择日期" />
                </el-form-item>
                
                
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="postData">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>


        <el-table :data="tableData" style="width: 100%">
            <el-table-column fixed prop="Title" label="活动点检标题" width="320" align="center" />
            <el-table-column fixed prop="Address" label="活动点检地址" width="420" align="center" />
            
            <el-table-column prop="cytime" label="开始时间" width="150" align="center">
                <template #default="scope">
                    {{ getLocalTime(scope.row.cytime)}}
                </template>
            </el-table-column>
            <el-table-column  prop="total" label="参与总人数" width="100" align="center" />
            <el-table-column prop="kjtime" label="结束时间" width="150" align="center">
                <template #default="scope">
                    {{ getLocalTime(scope.row.kjtime) }}
                </template>
            </el-table-column>
            

            <el-table-column fixed="right" label="操作" align="center">
                <template #default="scope">

                    <el-button link type="primary" @click="eid(scope.row.id)">修改</el-button>
                    <el-button link type="danger" @click="del(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

    </div>
</template>
<script>
import UploadFile from 'element-plus'
import {
	ElMessageBox,
	ElMessage
} from 'element-plus'
export default {
	components: {
		[UploadFile.name]: UploadFile
	},
	data() {
		return {
			HttpImg: "http://gyycadmincss.hansn.cn",
			tableData: [],
			jxlist: [],
			jxform: [],
			form: [],
			form1: [],
			dialogFormVisible: false,
			dialogFormVisible1: false,
			dialogjx: false,
			formLabelWidth: '120px',
			imageUrl: "",
			
			value: '',
			id: '',
			hdid: "",
			hdname: ""
		}
	},
	mounted() {
		this.getData()
	},
	methods: {
		
		tj(id,name) {
			this.dialogjx = true;
			this.hdid = id;
			this.hdname=name;
			this.getjxlist()
		},
		add() {
			this.form.Title = "";
			this.form.Address = "";
			this.form.StartDate = "";
			this.form.images = "";
			this.form.img = "";
			this.form.EndDate = "";
			this.form.num = "";
			this.dialogFormVisible = true;
			this.id = ""
		},
		
		
		del(id) {
			ElMessageBox.confirm(
				'是否确定删除?',
				'', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}
			)
				.then(() => {
					this.$http.post("/index.php/index/Adminfwdj/fwdjdel", {
						id: id
					}).then(res => {
						if (res.code == 200) {
							this.getData()
							ElMessage({
								message: '删除成功',
								type: 'success',
							})
						}
					})
				})
				.catch(() => {

				})
		},
		eid(id) {
			this.dialogFormVisible = true;
			this.id = id;
			this.$http.post("/index.php/index/Adminfwdj/fwdjxq", {
				id: id
			}).then(res => {
				if (res.code == 200) {
					this.form = res.data[0]
					this.form.StartDate = this.getLocalTime(res.data[0].StartDate)
					this.form.EndDate = this.getLocalTime(res.data[0].EndDate)
				
				}
			})
		},

		getData() {
			this.tableData = []
			this.$http.post("/index.php/index/Adminfwdj/fwdjlist").then(res => {
				console.log(res)
				this.tableData = res.data;
			})
		},
		postData() {
			// this.form.cjzt = this.value;
			let data = {
				Title: this.form.Title,
				Address: this.form.Address,
				StartDate: this.getTimeFormat(this.form.StartDate),
				EndDate: this.getTimeFormat(this.form.EndDate),
				id: this.id,
			}
			this.$http.post(this.id ? "/index.php/index/Adminfwdj/fwdjedit" : "/index.php/index/Adminfwdj/fwdjadd", data).then(res => {
				if (res.code == 200) {
					this.dialogFormVisible = false;
					this.id = ""
					ElMessage({
						message: this.id ? '编辑成功' : '新增成功',
						type: 'success',
					})
					this.getData()
				}
			})
		},
		getTimeFormat(zcTime) {
			let time = (new Date(zcTime).getTime()) / 1000; //除1000 是变成秒级的时间戳 不除就是毫秒级
			return time;
		},
		disabledDateFun(time) {
			return time.getTime() < Date.now() - 8.64e7;
		},
		formatEmployment(type) {
			// 根据源数据经过处理 把处理之后的数据返回
			// 定义一个映射结构
			const map = {
				0: '未发布',
				1: '活动中',
				2: '已结束',
			}
			return map[type]
		},
		getLocalTime(nS) {
			return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
		}
	}
}
</script>
<style scoped>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}

.avatar {
	width: 178px;
	height: 178px;
	display: block;

}
</style>
